<template>
  <ToolbarItemContainer ref="container" :iconFile="chatHistoryIcon" title="聊天记录" :needBottomPopup="true"
    :iconWidth="isUniFrameWork ? '20px' : '20px'" :iconHeight="isUniFrameWork ? '20px' : '20px'" @click="openDrawer">
  </ToolbarItemContainer>
  <el-drawer v-model="drawer" :with-header="false" size="450px">
    <div class="drawer-header">
      <el-icon size="18" style="float: right; cursor: pointer;" @click="drawer = false">
        <CloseBold />
      </el-icon>
      <div class="title">聊天记录</div>
    </div>
    <dl class="filter">
      <dd><el-date-picker v-model="during" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" value-format="YYYY-MM-DD" @change="getDate" /></dd>
      <dd><el-input v-model="params.content" style="width: 200px" placeholder="请输入聊天内容" /><el-button type="primary"
          style="margin-left: 20px;" @click="handleSearch">查询</el-button>
        <el-button @click="handleClear">重置</el-button>
      </dd>
    </dl>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane :label="item.label" :name="item.name" v-for="(item, index) in tabList" :key="index">
        <el-scrollbar height="calc(100vh - 250px)">
          <ul class="chatlist" v-infinite-scroll="loadMore" :infinite-scroll-distance="20"
            :infinite-scroll-immediate="false" :infinite-scroll-disabled="list.length >= total">
            <li v-for="(msg, i) in list" :key="i">
              <div class="from">
                <span>{{ msg.from_name ? msg.from_name : '系统' }}</span>
                <span>{{ msg.time_line }}</span>
              </div>
              <div class="content">
                <div v-if="msg.msg_type == 'TIMTextElem'">{{ msg.content.Text }}</div>
                <div v-if="msg.msg_type == 'TIMSoundElem'">
                  <audio :src="msg.content.Url" controls="controls" />
                </div>
                <div v-if="msg.msg_type == 'TIMImageElem'">
                  <el-image style="width: 80px; height: 80px;" :src="msg.content.ImageInfoArray[0].URL"
                    :preview-src-list="[msg.content.ImageInfoArray[0].URL]" fit="cover" />
                </div>
                <div v-if="msg.msg_type == 'TIMVideoFileElem'">
                  <video width="160" height="120" controls>
                    <source :src="msg.content.VideoUrl" type="video/mp4">
                    您的浏览器不支持 video 属性。
                  </video>
                </div>
                <div v-if="msg.msg_type == 'TIMFileElem'">
                  <a :href="msg.content.Url" _blank="target">
                    <div style="display: flex; align-items: center;">
                      <el-icon size="25" color="#666666">
                        <FolderOpened />
                      </el-icon>
                      <span style="color: #409eff; margin-left: 5px;">{{ msg.content.FileName
                        }}</span>
                    </div>
                  </a>
                </div>
                <div v-if="msg.msg_type == 'TIMRelayElem'">【合并转发消息】</div>
                <div v-if="msg.msg_type == 'TIMCustomElem'">
                  <div v-if="JSON.parse(msg.content.Data).type == 'imgMsg'">
                    <div v-html="JSON.parse(msg.content.Data).ext"></div>
                    <el-image style="width: 80px; height: 80px;" :src="JSON.parse(msg.content.Data).imageUrl"
                      :preview-src-list="[JSON.parse(msg.content.Data).imageUrl]" fit="cover"
                      v-if="JSON.parse(msg.content.Data).imageUrl" />
                  </div>
                  <div v-if="JSON.parse(msg.content.Data).type == 'evaluation'">【邀请评价】</div>
                  <div v-if="JSON.parse(msg.content.Data).type == 'workOrder'">【工单消息】</div>
                  <div v-if="JSON.parse(msg.content.Data).type == 'docMsg'">【工单消息】</div>
                </div>
              </div>
            </li>
            <div style="font-size: 12px; text-align: center; color: #999; margin-top: 10px;"
              v-if="list.length >= total">没有更多了</div>
          </ul>
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>
  </el-drawer>
</template>
<script setup lang="ts">
import TUIChatEngine, {
  TUIStore,
  StoreName,
  IConversationModel,
  TUIChatService,
  SendMessageParams,
  SendMessageOptions
} from '@tencentcloud/chat-uikit-engine';
import { ref, onMounted } from '../../../../adapter-vue';
import ToolbarItemContainer from '../toolbar-item-container/index.vue';
import chatHistoryIconLight from '../../../../assets/icon/chatHistory-light.svg';
import chatHistoryIconDark from '../../../../assets/icon/chatHistory-dark.svg';
import { isUniFrameWork } from '../../../../utils/env';
import TUIChatConfig from '../../config';
import type { TabsPaneContext } from 'element-plus'
import { isEnabledMessageReadReceiptGlobal } from '../../utils/utils';
import OfflinePushInfoManager, { IOfflinePushInfoCreateParams } from '../../offlinePushInfoManager/index';
import { GetChatHistoryList } from '@/api';

const chatHistoryIcon = TUIChatConfig.getTheme() === 'dark' ? chatHistoryIconDark : chatHistoryIconLight;

const container = ref();
const currentConversation = ref<IConversationModel>();

const drawer = ref(false);

const params = ref<any>({
  group_id: '',
  content: '',
  msg_type: '',
  start_time: '',
  end_time: '',
  page: 1
});
const during = ref([]);
const activeName = ref('ALL');
const tabList = ref([{
  label: '全部',
  name: 'ALL'
}, {
  label: '文字',
  name: 'TIMTextElem'
}, {
  label: '图片',
  name: 'TIMImageElem'
}, {
  label: '视频',
  name: 'TIMVideoFileElem'
}, {
  label: '文件',
  name: 'TIMFileElem'
}]);
const list = ref([]);
const total = ref(0);


TUIStore.watch(StoreName.CONV, {
  currentConversation: (conversation: IConversationModel) => {
    currentConversation.value = conversation;
    params.value.group_id = currentConversation.value.groupProfile.groupID
  },
});

function openDrawer() {
  drawer.value = true;
  params.value.page = 1;
  list.value = [];
  getList();
}

function getList() {
  GetChatHistoryList(params.value).then(res => {
    list.value.push(...res.data)
    total.value = res.count
  })
}

function getDate() {
  params.value.start_time = during.value[0]
  params.value.end_time = during.value[1]
}

const handleClick = (tab: TabsPaneContext, event: Event) => {
  list.value = [];
  params.value.page = 1;
  params.value.msg_type = tab.paneName == 'ALL' ? '' : tab.paneName;
  getList();
}

function handleClear() {
  params.value.content = '';
  params.value.start_time = '';
  params.value.end_time = '';
  params.value.page = 1;
  during.value = [];
  list.value = [];
  getList();
}

function loadMore(){
  if (list.value.length >= total.value) {
    return;
  }
  params.value.page++;
  getList();
}

function handleSearch() {
  list.value = [];
  params.value.page = 1;
  getList();
}
</script>

<style lang="scss" scoped>
.drawer-header {
  padding: 20px 0;

  .title {
    font-size: 16px;
  }
}

.filter {
  dd {
    margin-bottom: 10px;
  }
}

.chatlist {

  li{
    padding: 10px 0;
    border-bottom: solid 1px #eee;

    .from {
        display: flex;
        justify-content: space-between;
        align-items: center;
    
        span {
          font-size: 14px;
          color: #999;
        }
      }

    .content{
      margin-top: 10px;
      font-size: 14px;
    }
  }
  
}
</style>